<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        es6创造了一种新的遍历命令for ..of 循环,iterator接口主要供for of消费
        <br>
        原生具备iterator接口的数据类型：
        1.Array
        2.Map
        3.Set
        4.String
        5.TypedArray
        6.arguments对象
        7.NodeList对象

    </div>
</body>
<script>
    const arr = [1, 2, 3, 4, 5];
    for (let value of arr) {
        console.log(value);
    }
    // 为什么数组可以使用迭代器,数组中有symbol.iterator属性
    // 1.数组中具有iterator接口
    // 2.数组的Symbol.iterator属性指向了数组的iterator方法
    // 3.数组的iterator方法返回了iterator对象
    // 4.iterator对象具有next方法
    // 5.next方法返回一个对象，对象中有done和value属性
    // 6.done属性表示是否遍历结束，value属性表示当前遍历到的值
    let iterator = arr[Symbol.iterator]();
    console.log(iterator.next());
    console.log(iterator.next());
    console.log(iterator.next());
    console.log(iterator.next());
    console.log(iterator.next());

    // 迭代器应用：迭代对象
    const banji = {
        name: "1班",
        students: ["张三", "李四", "王五"]
    }
    // for (let value of banji) {
    //     console.log(value);
    // }
    // 直接for of遍历一个对象会报错，因为没有iterator方法
    banji[Symbol.iterator] = function () {
        let index = 0;
        let _this = this
        return {
            next: function () {
                if (index < _this.students.length) {
                    return {
                        value: _this.students[index++],
                        done: false
                    }
                } else {
                    return {
                        value: undefined,
                        done: true
                    }
                }
            }
        }
    }

    for (let value of banji) {
        console.log(value);
    }

</script>

</html>